<template>
	<div class="div1">
		<div class="div1Box">
			<el-backtop target=".div1"></el-backtop>
			<!-- 头部 -->

			<Head :data="searchList"></Head>
			<!-- 中部内容 -->
			<!-- <div style="background: #F6F5F7;"> -->
			<div style="background: #fff;">
				<!-- 导航 -->
				<div class="navigation">
					<div class="navList">
						<div v-for="(item, index) in navList" :key="index" :class="index == active ? 'active' : ''"
							class="navName" @click="onNavigation(index, item)">{{ item.title }}</div>
					</div>
				</div>
				<!-- 第一部分 -->
				<div class="ones tong" v-if="active == 0">
					<!-- 左边 -->
					<div class="ist is_left">
						<!--					<div class="left_title">家用电器</div>-->
						<div class="left_list">
							<div class="listName" v-for="(item, index) in leftList" :key="index"
								@click="getViewList(index)">
								<div class="listBoxName" :class="index == shaiXuanList ? 'listBoxName1' : ''">
									<!-- <span class="zhutiName nameCl" @click="onClick(item.id)">{{ item.name }}</span> -->
									<span v-for="(item1, index1) in numToShow(item.children, 1)" :key="index1">
										<span class="nameCl" @click="onClick(item1.id)">{{ item1.name }}</span>
										<!-- <span v-if="(index1+1) < item.children.length">/</span> -->
									</span>
								</div>
								<!-- <div class="xiamianListBox" :class="index==shaiXuanList?'xiamianListBoxXian':''">
								<span v-for="(item2, index2) in numToShow(item.children,2)" :key="index2">{{ item2.name }}</span>
							</div> -->
							</div>
						</div>
					</div>
					<!-- 中间 -->
					<div class="ist is_conts" style="margin: 0 10px;">
						<el-carousel height="470px">
							<el-carousel-item v-for="(item, index) in bannerList" :key="index">
								<img :src="item.imgUrl" class="bannerName" @click="bannerSkip(item)" />
							</el-carousel-item>
						</el-carousel>
					</div>
					<!-- 右边 -->
					<div class="ist is_right">
						<!-- <div class="rightTop">
						<img :src="image_url?image_url:'../../../static/logo.png'" class="imgTop" />
						<div class="topR" v-if="userId">
							<div class="Rname">{{ nickName }}</div>
							<div class = "Ryaoqingma">邀请码：{{ relationId }}</div>
						</div>
						<div class="topL" v-if="!userId">
							<div class="Rname" @click="goLogin()">登录/注册</div>
						</div>
					</div> -->
						<!-- 	<div class = "rightVip" v-if = "!userId">
						<div class = "vipName">开通会员</div>
						<div class = "vipKthy" @click = "goLogin()">立即开通</div>
					</div> -->
						<!-- 	<div class = "rightNoVip" v-if = "userId">
						<div class = "">{{ dengji }}{{ dengjides }}</div>
												<div class="rightBtn" >我的特权 <i class="el-icon-arrow-right"></i> </div>
					</div> -->
						<!-- <div class="Rclass" @click="goOrder()">
						<div class="classList">
							<div class="RlistNum">{{ dingdanCountList.count1 }}</div>
							<div class="RlistName">待付款</div>
						</div>
						<div class="classList">
							<div class="RlistNum">{{ dingdanCountList.count2 }}</div>
							<div class="RlistName">待发货</div>
						</div>
						<div class="classList">
							<div class="RlistNum">{{ dingdanCountList.count3 }}</div>
							<div class="RlistName">待收货</div>
						</div>
						<div class="classList">
							<div class="RlistNum">{{ dingdanCountList.count4 }}</div>
							<div class="RlistName">待评价</div>
						</div>
					</div>
					<div class="Rbottom">
						<div class="bottomTitle">平台公告</div>

						<div class="bottomS" v-for="(item,index) in gonggaoList.content" :key="index">
							<div>{{item.title}}</div>
							<div>测试文字</div>
						</div>
						<div class = "bottomList">
							<div class = "listI">
								<img class = "bottomImg" src = "../../assets/index/gouwu.png"/>
								<div class = "bottomName">购物赚钱</div>
							</div>
							<div class = "listI">
								<img class = "bottomImg" src = "../../assets/index/fanli.png"/>
								<div class = "bottomName">省钱返利</div>
							</div>
							<div class = "listI">
								<img class = "bottomImg" src = "../../assets/index/fenxiang.png"/>
								<div class = "bottomName">分享赚钱</div>
							</div>
						</div>
					</div> -->
						<!-- 登录注册 -->
						<div class="denglu">
							<!-- 头像 -->
							<div class="avaterImg">
								<el-avatar :size="40"
									:src="image_url ? image_url : '../../../static/logo.png'"></el-avatar>
								<!-- <div class="zhuce" @click="goLogin()" v-if="!userId">注册 / 登录</div> -->
								<div class="zhuce" @click="goLogin()" v-if="!userId">{{ $t('home.RegistrationLogin') }}
								</div>
								<div class="zhuce" v-if="userId">{{ nickName }}</div>
							</div>
							<div class="xianBox">
								<div class="avaterXian"></div>
							</div>
							<!-- 订单状态 -->
							<div class="dingdan" @click="goOrder()">
								<div class="zhuangtai">
									<div class="numText"><el-badge :value="0" class="item">0</el-badge></div>
									<div class="taiText">{{ $t('home.obligation') }}</div>
								</div>
								<div class="zhuangtai">
									<div class="numText">0</div>
									<div class="taiText">{{ $t('home.shipped') }}</div>
								</div>
								<div class="zhuangtai">
									<div class="numText">0</div>
									<div class="taiText">{{ $t('home.received') }}</div>
								</div>
							</div>
						</div>
						<!-- 商家入住 -->
						<div class="zhaoshang">
							<img :src="shangjiaru" alt="">
						</div>
					</div>
				</div>
				<!-- 新第二部分 -->
				<div class="san tong" v-if="active == 0">
					<!-- 选购 -->
					<div class="xuangou" v-for="item, index in xuangouImageList" :key="index">
						<img :src="item.beiJingImage" alt="">
					</div>
				</div>
				<!-- 第二部分 -->
				<!-- <div class="tong second" v-if="active==0">
				<div class="seconds">
					<div class="secondsleft">
						<div class="secondsleft_title">精选专题</div>
						<div class="secondsleft_dixy">懂你想要</div>
						<div class="chakan" @click="quanbuClick()">查看全部 ></div>
					</div>
					<div class="secondsRight">
						<div v-if="index<5" class="secondsRight_list" v-for="(item,index) in secondsList" :key="index"
							@click="switchover(item)">
							<div class="secondsRight_title">{{ item.title }}</div>
							<div class="secondsRight_sm">{{ item.shuoming }}</div>
							<img class="secondsRight_img" :src="item.image_url" />
						</div>
					</div>
				</div>
			</div> -->

				<!-- 第三部分 -->
				<div class="tong three margin_33" v-if="active == 0">
					<div class="navList2">
						<div v-for="(item, index) in navList1" :key="index" :class="index == active1 ? 'active1' : ''"
							class="navName1" @click="onNavigation1(index, item)">
							{{ item.title }}
						</div>
					</div>
					<!-- 筛选表格 -->
					<!-- <div class="shuaixuanBox">
					<div class="suoyou">所有</div>
					<div class="shaiBox">居家好物</div>
					<div class="shaiBox">服装配饰</div>
					<div class="shaiBox">婴童用品</div>
					<div class="shaiBox">服装鞋履</div>
					<div class="shaiBox">品牌箱包</div>
					<div class="shaiIcon"><i class="el-icon-s-fold"></i></div>
				</div> -->
				</div>
				<div class="tong three quMargin" v-if="active != 0">
					<div class="table_main">
						<table>
							<tbody>
								<tr>
									<th class="left-th">排序</th>
									<th class="border-bt right-th">
										<div v-for="(item, index) in classList1" :key="index"
											:class="index == active3 ? 'active2' : ''" class="className"
											@click="classOn1(index, item)">{{ item.title }}</div>
									</th>
								</tr>
							</tbody>
						</table>

					</div>
				</div>
				<div class="tong three quMargin" v-if="dataList.content.length != 0" v-loading="tableDataLoading">
					<goodsItem v-if="title != '拼团购'" :title="title" :isVip="relationId ? true : false"
						:data="dataList.content"></goodsItem>
					<goodsItem3 v-if="title == '拼团购'" :title="title" :isVip="relationId ? true : false"
						:data="dataList.content"></goodsItem3>
				</div>
				<div class="tong three quMargin" v-if="dataList.content.length != 0">
					<el-pagination style="text-align: center;padding-bottom: 50px;" layout="prev, pager, next"
						:total="dataList.totalElements" @current-change="handleCurrentChange" :current-page="page"
						:page-size="size">
					</el-pagination>
				</div>
				<div class="emptyWrap" v-if="dataList.content.length == 0">
					<img src="../../../static/images/empty.png" alt="">
					<div style="">暂无内容</div>
				</div>

			</div>
			<!-- 底部 -->
			<Foots></Foots>
		</div>

	</div>
</template>

<script>
import Head from '@/components/head.vue'
import Foots from '@/components/foots.vue'
import goodsItem from "../../components/goods-item";
import goodsItem3 from "../../components/goods-item3";
import { Loading } from "element-ui";
import shangjiaru from "../../assets/img/shangjiaru.jpg"
import xuangou_1 from "../../assets/img/xuangou_1.jpg"
import xuangou_2 from "../../assets/img/xuangou_2.jpg"
import xuangou_3 from "../../assets/img/xuangou_3.jpg"
export default {
	components: {
		Head,
		Foots,
		goodsItem,
		goodsItem3
	},
	data() {
		return {
			shangjiaru,
			xuangou_1,
			xuangou_2,
			xuangou_3,
			page: 1,
			size: 12,
			dengji: '',
			dengjides: '',
			sort: 'createAt',
			searchList: ['粽子', '防晒霜', '洗衣液', '蚊香液', '抽纸', '零食'],
			// navList: [{
			// 	title: '首页',
			// 	type: ''
			// },
			// {
			// 	title: '热卖',
			// 	type: ''
			// },
			// {
			// 	title: '精选',
			// 	type: ''
			// },
			// {
			// 	title: '拼团',
			// 	type: ''
			// }, {
			// 	title: '每日推荐',
			// 	type: ''
			// },
			// ],
			tableDataLoading: false,
			navList1: [],
			// navList1: ['精选', '热卖榜单', '服装饰品', '彩妆护肤', '母婴潮童', '家居家电'],
			active: 0,
			active1: 0,
			active2: 0,
			active3: 0,
			number1: '',
			number2: '',
			number3: '',
			bannerList: [],
			leftList: [],
			secondsList: [{
				createAt: "2021-09-28 14:46:58",
				id: 10,
				image_url: "https://api.shengqianxiong.com.cn/indexhomebig.png",
				state: "1",
				title: "为你推荐",
				type: 40
			},
			{
				createAt: "2021-09-28 14:46:58",
				id: 10,
				image_url: "https://api.shengqianxiong.com.cn/file/uploadPath/2021/10/09/acff2de891a9742a930249c72b39e22d.png",
				state: "1",
				title: "精选好物",
				type: 40
			},
			{
				createAt: "2021-09-28 14:46:58",
				id: 10,
				image_url: "https://api.shengqianxiong.com.cn/file/uploadPath/2021/09/28/e30819f7f7d2aff2b9f824ae2a6d2c7d.png",
				state: "1",
				title: "热卖榜单",
				type: 40
			},
			{
				createAt: "2021-09-28 14:46:58",
				id: 10,
				image_url: "https://api.shengqianxiong.com.cn/file/uploadPath/2021/09/28/109f8c26ed8ecb4bfba50ea7fb13feb1.png",
				state: "1",
				title: "每日上新",
				type: 40
			},
			{
				createAt: "2021-09-28 14:46:58",
				id: 10,
				image_url: "https://api.shengqianxiong.com.cn/file/uploadPath/2021/10/09/9176a370ac14fc10820d726d0ba710f2.png",
				state: "1",
				title: "拼团购",
				type: 40
			},
			],
			dataList: {
				content: []
			},
			classList: ['全部', '女装', '男装', '美妆', '内衣', '配饰', '箱包', '鞋品', '美食', '电器', '母婴', '儿童'],
			classList1: [{
				title: '综合',
				type: 'createAt'
			}, {
				title: '销量',
				type: 'sales'
			}, {
				title: '超低价',
				type: 'price'
			}],
			relationId: this.$cookie.get('relationId'), //邀请码
			image_url: '', //头像
			nickName: '', //用户名
			invitationCode: '',
			phone: '', //电话
			isLogin: false,
			// userId : this.$cookie.get('userId'),
			dingdanCountList: {
				count1: 0,
				count2: 0,
				count3: 0,
				count4: 0,
				count5: 0,
			}, //订单数量
			type: 'createAt',
			title: '热卖榜单',

			navlist: [],
			gonggaoList: [],

			jingXuan: [],
			reMai: [],
			meiRi: [],
			pinTuan: [],
			classId: 1,
			shaiXuanList: -1,
			xuangouImageList: [{
				beiJingImage: xuangou_1
			}, {
				beiJingImage: xuangou_2
			}, {
				beiJingImage: xuangou_3
			}],
			circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png', //登录头像图片
		}
	},
	mounted() {
		this.dataSelect()
		this.bannerSelect()
		this.classSelect()
		this.classSelectP()
		this.getLeftList()
		this.getHomeGongGao()
		this.getSearchList()
		if (this.userId) {
			this.getOrderCount()
			this.userSelect()
		}
	},
	computed: {
		userId() {
			return this.$cookie.get('userId')
		},
		navList() {
			const baseItems = [{
				title: 'head.searchHomePage',
				type: ''
			},
			{
				title: 'home.headSellWell',
				type: ''
			},
			{
				title: 'home.headHandpicked',
				type: ''
			},
			{
				title: 'home.headClubTogether',
				type: ''
			}, {
				title: 'home.headDaily',
				type: ''
			},
			];
			return baseItems.map(item => ({
				...item,
				title: this.$t(item.title),
			}));
		},
		// navList1() {
		// 	// const baseItems = ['home.headHandpicked', 'home.headSellWellList', 'home.headClothing', 'home.headCosmetics', 'home.headMaternal', 'home.headAppliances']
		// 	// let aaa = baseItems.map(item => this.$t(item));
		// 	// return baseItems.map(item => ({
		// 	// 	...item,
		// 	// 	title: this.$t(item.title),
		// 	// }));
		// 	// console.log('aaaa', aaa)
		// 	// return aaa
		// },
	},
	methods: {
		getSearchList() {
			this.$http({
				url: this.$http.adornUrl('/common/type/285'), //热词
				method: 'get',
			}).then(({
				data
			}) => {
				this.searchList = data.data.value.split(',')
			})
		},
		getHomeGongGao() {
			this.$http({
				url: this.$http.adornUrl('/message/page/1/0/5'),
				method: 'get',
			}).then(({
				data
			}) => {
				this.gonggaoList = data.data
			})
		},
		//跳转订单页面
		goOrder() {
			if (this.userId) {
				this.$router.push({
					path: '/order'
				})
			} else {
				this.$router.push({
					path: '/login'
				})
			}
			// this.$router.push({
			// 	path: '/order'
			// })
		},
		//轮播图跳转
		bannerSkip(e) {
			window.location.href = e.linkUrl
		},
		onNavigation(index, item) {
			console.log('index-----232', index)
			console.log('item------232', item)
			this.active = index
			this.active3 = 0 //重置排序

			this.title = item.title
			this.page = 1
			// if (this.title == '拼团购') {
			if (this.title == this.$t('home.headClubTogether')) {
				this.sort = 'createTime'
			} else {
				this.sort = 'createAt'
			}
			if (this.active) {
				this.getDataList()
			}
		},
		getDataList() {
			let loadingInstance = Loading.service({
				lock: true,
				text: '加载中……',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			if (this.title == '热卖') {
				this.$http({
					url: this.$http.adornUrl('/goods/selling'),
					method: 'get',
					params: this.$http.adornParams({
						'sort': this.sort,
						'page': this.page - 1,
						'size': this.size,
					})
				}).then(({
					data
				}) => {
					loadingInstance.close();
					if (data.status == 0) {
						this.dataList = data.data
					}
					console.log('aaa', this.dataList)
				})
			} else if (this.title == '精选') {
				this.$http({
					url: this.$http.adornUrl('/goods/selectGoods'),
					method: 'get',
					params: this.$http.adornParams({
						'sort': this.sort,
						'page': this.page - 1,
						'size': this.size,
					})
				}).then(({
					data
				}) => {
					loadingInstance.close();
					if (data.status == 0) {
						this.dataList = data.data
					}
				})
			} else if (this.title == '每日上新') {
				this.$http({
					url: this.$http.adornUrl('/goods/news'),
					method: 'get',
					params: this.$http.adornParams({
						'sort': this.sort,
						'page': this.page - 1,
						'size': this.size,
					})
				}).then(({
					data
				}) => {
					loadingInstance.close();
					if (data.status == 0) {
						this.dataList = data.data
					}
				})
			} else if (this.title == '每日推荐') {
				this.$http({
					url: this.$http.adornUrl('/goods/recommend'),
					method: 'get',
					params: this.$http.adornParams({
						'sort': this.sort,
						'page': this.page - 1,
						'size': this.size,
					})
				}).then(({
					data
				}) => {
					loadingInstance.close();
					if (data.status == 0) {
						this.dataList = data.data
					}
				})
			} else if (this.title == '拼团') {
				this.$http({
					url: this.$http.adornUrl('/selfGroup/userList'),
					method: 'get',
					params: this.$http.adornParams({
						'sort': this.sort,
						'page': this.page - 1,
						'size': this.size,
					})
				}).then(({
					data
				}) => {
					loadingInstance.close();
					if (data.status == 0) {
						this.dataList = data.data
					}
				})
			} else {
				this.$http({
					url: this.$http.adornUrl('/goods/userList'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page - 1,
						'size': this.size,
						'sort': this.sort,
						'type': this.type
					})
				}).then(({
					data
				}) => {
					this.dataList = data.data
				})
			}
		},
		onNavigation1(index, item) {
			this.active1 = index
			this.page = 1
			this.type = item.url.slice(item.url.indexOf('cid=') + 4, item.url.indexOf('&'))
			this.sort = 'createAt'
			this.classId = item.id
			if (item.title == '热销专区') {
				this.title = '热销专区'
				this.dataSelect()
			} else if (item.title == '热卖榜单') {
				this.title = '热卖榜单'
				this.dataSelect()
			} else if (item.title == '精选好物') {
				this.title = '精选好物'
				this.dataSelect()
			} else {
				this.title = ''
				this.dataSelect()
			}
		},
		classOn(index) {
			this.active2 = index
		},
		classOn1(index, item) {
			this.active3 = index
			this.sort = item.type
			if (this.title == '拼团购' && this.active3 == 1) {
				this.sort = 'groupNumber'
			}
			this.getDataList()
		},
		onClick(id) {
			this.$router.push({
				path: '/productList?type=' + id
			})
		},
		handleCurrentChange(val) {
			this.page = val
			if (this.active == 0) {
				this.dataSelect()
			} else {
				this.getDataList()
			}
		},
		quanbuClick() {
			console.log('点击查看全部')
		},
		// 商品数据分类
		classSelect() {
			this.$http({
				url: this.$http.adornUrl('/selfActivity/list'),
				method: 'get',
				params: this.$http.adornParams({})
			}).then(({
				data
			}) => {
				// this.navList1 = data.data

				this.navlist = [];
				this.jingXuan = [];
				this.reMai = [];
				this.meiRi = [];
				this.pinTuan = [];
				this.secondsList = []

				data.data.forEach(d => {
					if (d.url) {
						const str = d.url.substr(d.url.indexOf("?") + 1, d.url.length)
						const params = str.split('&')
						const code = params[0].split('=')[1]
						d.cid = code
						if (d.state == '1') {
							this.navlist.push(d);
							// this.secondsList[0] = d
						} else if (d.state == '2') {
							this.jingXuan.push(d);
							this.secondsList.push(d);
							// this.secondsList[1] = d
						} else if (d.state == '3') {
							this.reMai.push(d);
							this.secondsList.push(d);
							// this.secondsList[2] = d
						} else if (d.state == '4') {
							this.meiRi.push(d);
							this.secondsList.push(d);
							// this.secondsList[3] = d
						} else if (d.state == '5') {
							this.pinTuan.push(d);
							this.secondsList.push(d);
							// this.secondsList[4] = d
						}
					}

				});
			})
		},
		// 商品分类
		classSelectP() {
			this.$http({
				url: this.$http.adornUrl('/selfActivity/state'),
				method: 'get',
				params: this.$http.adornParams({
					state: 10
				})
			}).then(({ data }) => {
				// console.log('aaa1111a', data.data)
				this.navList1 = data.data
				// let dataObj = data.data.map(item => ({
				// 	...item,
				// 	title: this.$t(item.title),
				// }));
				// this.navList1 = dataObj
			})
		},
		// 获取商品数据
		dataSelect() {
			this.tableDataLoading = true
			if (this.title == '热卖榜单' || this.classId == 21 || this.classId == 1) {
				this.$http({
					url: this.$http.adornUrl('/goods/selling'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page - 1,
						'size': this.size,
						'sort': this.sort
					})
				}).then(({
					data
				}) => {
					this.tableDataLoading = false
					this.dataList = data.data
				})
			} else if (this.title == '精选好物') {
				this.$http({
					url: this.$http.adornUrl('/goods/selectGoods'),
					method: 'get',
					params: this.$http.adornParams({
						'sort': this.sort,
						'page': this.page - 1,
						'size': this.size,
					})
				}).then(({
					data
				}) => {
					this.tableDataLoading = false
					if (data.status == 0) {
						this.dataList = data.data
					}
				})
			} else {
				this.$http({
					url: this.$http.adornUrl('goods/userList'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page - 1,
						'size': this.size,
						'sort': this.sort,
						'type': this.type
					})
				}).then(({
					data
				}) => {
					this.tableDataLoading = false
					this.dataList = data.data
				})
			}

		},
		// 获取轮播图
		bannerSelect() {
			this.$http({
				url: this.$http.adornUrl('/advert/list'),
				method: 'get',
				params: this.$http.adornParams({
					type: 2
				})
			}).then(({
				data
			}) => {
				this.bannerList = data.data
			})
		},
		// 获取用户信息
		userSelect() {
			this.$http({
				url: this.$http.adornUrl('/user/' + this.userId),
				method: 'get',
				params: this.$http.adornParams({})
			}).then(({
				data
			}) => {
				if (data.status == 0) {
					this.isLogin = true
					this.relationId = data.data.relationId
					this.image_url = data.data.image_url
					this.nickName = data.data.nickName
					this.invitationCode = data.data.invitationCode
					this.phone = data.data.phone
					if (data.data.gradeDes) {
						this.dengji = data.data.gradeDes;
					} else {
						this.dengji = '已邀请0人';
					}
					if (data.data.gradeNumber) {
						// this.dengjides = data.data.gradeNumber;
						if (data.data.gradeNumber == '还可邀请0人') {
							this.dengjides = '已到达最高等级';
						} else {
							this.dengjides = data.data.gradeNumber;
						}
					} else {
						// this.dengjides = '还可邀请0人'
						// let number = this.$queue.invitaionNum();
						// this.dengjides = '还可邀请' + number + '人';
					}
					this.$cookie.set('relationId', data.data.relationId)
					this.$cookie.set('image_url', data.data.image_url)
					this.$cookie.set('nickName', data.data.nickName)
					this.$cookie.set('phone', data.data.phone)
					console.log('@@@@@@@@', this.$cookie.get('nickName'))
				}
			})
		},
		// 商品数据分类
		getOrderCount() {
			this.$http({
				url: this.$http.adornUrl('/orders/count?userId=' + this.userId),
				method: 'get',
				params: this.$http.adornParams({})
			}).then(({
				data
			}) => {
				if (data.status === 0) {
					this.dingdanCountList = data.data;
				}
			})
		},
		getLeftList() {
			this.$http({
				url: this.$http.adornUrl('/goodsType/list'),
				method: 'get',
				params: this.$http.adornParams({})
			}).then(({
				data
			}) => {
				if (data.status === 0) {
					this.leftList = data.data;
				}
				// console.log('this.leftList===>', this.leftList)
			})
		},
		switchover(item) {
			this.$router.push({
				path: '/productList2?id=' + item.id + '&title=' + item.title + '&type=' + item.cid
			})
		},

		/* 登录 */
		goLogin() {
			this.$router.push({
				path: '/login'
			})
		},
		// 限制循环次数不超过2次
		numToShow(itemList, indexShi) {
			var numList = []
			// console.log('itemList1111',itemList)
			if (indexShi == 1) {
				numList = itemList.slice(0, 3)
			} else {
				numList = itemList.slice(3)
			}
			return numList
		},
		getViewList(numberNum) {
			console.log('numberNum', numberNum)
			if (this.shaiXuanList == numberNum) {
				this.shaiXuanList = -1
				// console.log('this.shaiXuanList---1',this.shaiXuanList)
			} else {
				this.shaiXuanList = numberNum
				// console.log('this.shaiXuanList---2',this.shaiXuanList)
			}
		}
	}
}
</script>

<style scoped>
.div1 {
	height: 100vh;
	margin: 0 auto;
	overflow-x: hidden;
	/* background: #fff !important; */
}

.div1Box {
	width: 100%;
	margin: 0 auto;
	overflow-x: hidden;
	background: #fff;
}

/* 导航 */
.navigation {
	/* background: #FF2D55; */
	/* background: #000; */
	/* height: 40px;
		line-height: 40px; */
	color: #000;
	margin-bottom: 25px;
}

.navList {
	width: 1200px;
	margin: 0 auto;
	display: flex;
}

.navName {
	display: inline-block;
	width: 20%;
	text-align: center;
	cursor: pointer;
	font-weight: 500;
	font-size: 18px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.active {
	background: #343434;
	color: #fff;
	border-radius: 25px;
}

/* 第一部分 */
.tong {
	width: 1200px;
	margin: 0 auto;
	margin-top: 15px;
}

.ones {
	height: 470px;
}

.ist {
	display: inline-block;
	height: 470px;
	box-sizing: border-box;
}

.is_left {
	width: 20%;
	overflow-y: auto;
	/* margin-right: 1.5%; */
	border-radius: 9px;
	line-height: 40px;
	/* padding: 20px; */
	color: #333333;
	font-size: 14px;
	background: #fff;
	border-radius: 4px;
	float: left;
	box-shadow: 1px 0px 5px 5px rgba(168, 168, 168, .65);
}

.zhutiName {
	font-size: 16px !important;
	font-weight: 500 !important;
	color: #3D3D3D;
	margin-right: 15px;
}

.nameCl {
	font-size: 12px;
	font-weight: 400;
	color: #3D3D3D;
	display: inline-block;
	margin-right: 15px;
	padding-top: 5px;
}



.listName {
	position: relative;
	/* height: 55px; */
	display: flex;
	/* align-items: center; */
	justify-content: center;
	flex-direction: column;
	overflow: hidden;
}

/* /deep/.is_left::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none;
} */
.listBoxName:hover {
	background: #E7E7E7;
	cursor: pointer;
}

.listBoxName::after {
	content: '\e62f';
	font-family: 'iconfont';
	display: inline-block;
	position: absolute;
	right: 14px;
	line-height: 55px;
	/* top: 50%;
	transform: translate(-50% -50%); */
}

.listBoxName span:nth-child(1) span {
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #3D3D3D;
	margin-right: 15px;
}

.listBoxName1::after {
	content: '\e632';
	font-family: 'iconfont';
	display: inline-block;
	position: absolute;
	right: 14px;
	line-height: 55px;
}

.listBoxName {
	/* height: 100%; */
	padding-left: 10px;
	padding-right: 14px;
	height: 55px;
	overflow-y: auto;
	width: 100%;
	box-sizing: border-box;
	border-bottom: 1px solid #EAEAEA !important;
}

.xiamianListBox {
	background: #e8e8e8;
	display: none;
	padding-left: 15px;
	padding-right: 14px;
}

.xiamianListBoxXian {
	display: block;
}

.nameCl:hover {
	/* color: #FF2D55 !important; */
	color: #EA7408 !important;
	cursor: pointer;
}

.is_conts {
	width: 720px;
	/* margin-right: 1.5%; */
	height: 470px;
}

.bannerName {
	width: 100%;
	height: 100%;
	border-radius: 0;
}

.is_right {
	width: 220px;
	color: #333333;
	font-size: 14px;
	background: #fff;
	border-radius: 4px;
	box-sizing: border-box;
	height: 470px;
	float: right;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}

/* 头像 */
.denglu {
	height: 163px;
	box-shadow: 1px 0px 2px 3px rgba(168, 168, 168, .15);
	/* border: 1px dashed #3D3D3D; */
}

.avaterImg {
	display: flex;
	height: 85px;
	padding-left: 34px;
	padding-top: 31px;
	padding-bottom: 14px;
	box-sizing: border-box;

}

.el-avatar {
	background: none;
	border: 1px solid #e8e8e8;
}

.zhuce {
	margin-left: 11px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	color: #3D3D3D;
	font-weight: 400;
	font-family: PingFang SC-Heavy;
}

.zhuce:hover {
	cursor: pointer;
}

.xianBox {
	display: flex;
	justify-content: center;
	align-items: center;
}

.avaterXian {
	height: 1px;
	width: 137px;
	background: #D8D8D8;
}

/* 订单状态 */
.dingdan {
	padding: 0 20px;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}

.dingdan:hover {
	cursor: pointer;
}

.zhuangtai {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	padding-top: 9px;
}

.numText {
	font-size: 14px;
	color: #3D3D3D;
	font-weight: 400;
}

/* 商家入住 */
.zhaoshang {
	width: 100%;
	height: 296px;
	border-radius: 9px;
	overflow: hidden;
	/* background-image: url(../../assets/img/zhaoshang.jpg); */
	background-size: cover;
	background-repeat: no-repeat;
	/* border: 1px dashed #3D3D3D; */
	box-shadow: 1px 0px 2px 3px rgba(168, 168, 168, .15);
}

.zhaoshang img {
	width: 100%;
	height: 100%;
}

.taiText {
	width: 36px;
	height: 34px;
	font-size: 12px;
	color: #3D3D3D;
	font-weight: 400;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 第二部分 */
.san {
	margin-top: 25px;
	height: 195px;
	display: flex;
	justify-content: space-between;
	/* background: #fff; */
}

.xuangou {
	height: 100%;
	width: 386px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
	border-radius: 9px;
	overflow: hidden;
	box-shadow: 1px 0px 3px 3px rgba(168, 168, 168, .55);
}

.xuangou img {
	width: 100%;
	height: 100%;
}

.xuangou img:hover {
	cursor: pointer;
}

/* .san .xuangou:nth-child(1) {
	background-image: url(../../assets/img/xuangou_1.jpg);
}

.san .xuangou:nth-child(2) {
	background-image: url(../../assets/img/xuangou_2.jpg);
}

.san .xuangou:nth-child(3) {
	background-image: url(../../assets/img/xuangou_3.jpg);
} */



/* 第三部分 */
.margin_33 {
	margin-top: 33px !important;
}

.jieshao {
	width: 125px;
	height: 34px;
	line-height: 34px;
	color: #0578E4;
	font-size: 12px;
}

.rightTop {
	padding: 20px;
}

.imgTop {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	float: left;
}

.topR {
	margin-left: 60px;
	line-height: 25px;
}

.topL {
	margin-left: 60px;
	line-height: 50px;
	height: 50px;
}

.topL>div:hover {
	cursor: pointer;
}

.Rname {
	font-size: 20px;
}

.Ryaoqingma {
	font-size: 14px;
}

.rightVip {
	margin: 0 20px 15px;
	padding: 0;
	height: 40px;
	border-radius: 5px;
	background: #FF2D55;
	color: #fff;
}

.rightVip div {
	display: inline-block;
}

.rightNoVip {
	margin: 0 20px 15px;
	height: 40px;
	border-radius: 5px;
	background: #FF2D55;
	color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	line-height: 40px;
	padding: 0 20px;
	font-size: 16px;
}

.rightBtn {
	width: 80px;
	height: 27px;
	text-align: center;
	font-size: 12px;
	color: #333;
	border-radius: 16px;
	z-index: 1;
	background: #fde3de;
	display: flex;
	justify-content: center;
	align-items: center;
}

.vipName {
	line-height: 40px;
	padding-left: 15px;
	font-size: 18px;
	font-weight: 600;
}

.vipKthy {
	background: #fff;
	font-size: 12px;
	color: #FF2D55;
	height: 20px;
	line-height: 20px;
	margin-left: 36%;
	padding: 0 6px;
	border-radius: 20px;
}

.vipKthy:hover {
	cursor: pointer;
}


.Rclass {
	padding: 0 20px 15px;
	border-bottom: 1px solid #F2F2F2;
	box-sizing: border-box;
	margin-top: 30px;
}

.classList {
	display: inline-block;
	width: 23%;
	text-align: center;
}

.RlistNum {
	font-size: 24px;
	font-weight: 600;
}

.RlistName {
	font-size: 14px;
}

.Rbottom {
	padding: 15px 20px;

}

.bottomTitle {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 15px;
}

.bottomS {
	font-size: 12px;
	margin: 20px 0px;
}

.bottomList {
	padding: 15px 0;
}

.listI {
	display: inline-block;
	width: 32%;
	text-align: center;
}

.bottomImg {
	width: 34px;
}

/* 第二部分 */
.seconds {
	background: url(../../assets/index/bg.png) no-repeat;
	background-size: 100% 100%;
	box-sizing: border-box;
	height: 275px;
	/* border-radius: 5px; */
}

.secondsleft {
	width: 15%;
	float: left;
	color: #fff;
	font-size: 18px;
	padding: 20px;
	box-sizing: border-box;
}

.secondsleft_title {
	font-size: 30px;
	font-weight: 600;
	line-height: 40px;
}

.secondsleft_dixy {
	height: 177px;
}

/deep/.el-carousel__arrow {
	border-radius: 0 !important;
}

/deep/.el-carousel__item {
	border-radius: 0 !important;
}

/deep/.is-animating {
	border-radius: 0 !important;
}

.chakan {
	cursor: pointer;
}

.secondsRight {
	margin-left: 16%;
	border: none;
	border-radius: 6px;
	background: #fff;
	border: 1px solid #FF2D55;
	box-sizing: border-box;
}

.secondsRight_list {
	display: inline-block;
	width: 20%;
	box-sizing: border-box;
	padding: 20px;
	font-size: 18px;

}

.secondsRight_title {
	line-height: 30px;
	color: #333;
	font-weight: 600;
	text-align: center;
}

.secondsRight_sm {
	font-size: 13px;
	color: #999;
	margin-bottom: 20px;
	text-align: center;
}

.secondsRight_img {
	width: 100%;
	height: 161px;
}

/* 第三部分 */
.navList2 {
	width: 100%;
	height: 65px;
	line-height: 65px;
	font-size: 18px;
	color: #333;
	background: rgba(216, 216, 216, .65);
	border-radius: 2px;
}

.navName1 {
	display: inline-block;
	width: 16.66%;
	text-align: center;
	cursor: pointer;
	border-radius: 4px;
	font-size: 20px;
	color: #3D3D3D;
}

.active1 {
	/* background: #FF2D55; */
	background: #fff;
	color: #000000;
	font-size: 24px;
	font-weight: 400;
}

/* 筛选表格 */
.shuaixuanBox {
	height: 130px;
	width: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	/* background: rebeccapurple; */
}

.suoyou {
	width: 83px;
	height: 45px;
	background: #000000;
	color: #fff;
	border-radius: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 18px;
	font-weight: 900;
	margin-right: 14px;
}

.shaiBox {
	width: 148px;
	height: 45px;
	border: 1px dashed #3D3D3D;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 14px;
}

.shaiIcon {
	margin-right: 19px;
}

/deep/.el-icon-s-fold {
	font-size: 18px !important;
}

.table_main table {
	width: 100%;
}

.table_main {
	border: 1px solid #e8e8e8;

}

table tr {
	/* border-bottom: 1px solid #e8e8e8; */
	background: #fff;
}

table tr th {
	padding: 16px 24px;
	/* border-right: 1px solid #e8e8e8; */
	/* border-bottom: 1px solid #e8e8e8; */
}

table tr td {
	padding: 16px 24px;
	/* border-right: 1px solid #e8e8e8; */
	border-bottom: 1px solid #e8e8e8;
}

table th {
	color: rgba(0, 0, 0, .85);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
}

.border-rt {
	border-right: none !important;
}

.border-bt {
	border-bottom: none !important;
}

.left-th {
	color: #333;
	width: 50px;
	line-height: 50px;
}

.right-th {
	text-align: left;
	padding-left: 30px;
}

.className {
	display: inline-block;
	/* width: 50px; */
	background-color: #fff;
	font-size: 14px;
	color: #333;
	margin: 10px 5px;
	padding: 0 20px;
	text-align: center;
	cursor: pointer;
}

.active2 {
	background: #EA7408;
	color: #fff;
	border-radius: 4px;
}

/deep/.el-pagination .el-pager .active {
	background: #EA7408 !important;
	color: #fff;
}

/deep/.el-pagination .el-pager .active:hover {
	cursor: pointer;
	color: #fff !important;
}

.number :hover {
	color: #EA7408;
}

.yxl {
	width: 70px;
	margin: 0 50px 0 10px;
	border: 1px solid #E6E6E6;
	height: 30px;
	line-height: 30px;
	border-radius: 4px;
}

.jiage1 {
	margin: 0 20px;
	width: 50px;
}

.emptyWrap {
	width: 100%;
	text-align: center;
	margin: 80px 0;
}

.emptyWrap>div {
	font-size: 24px;
	font-weight: 700;
	color: #999999;
}

.quMargin {
	/* margin-top: 0 !important; */
}

/* @media (max-width: 1439px) {
	.navList{
		width: 100%;
	}
	.tong{
		width: 100%;
	}
	.is_conts{
		width: 60%;
	}
	.is_right{
		width: 20%;
	}
} */
</style>
